<template>
  <div class="wrap">
  <div style="color: white;font-size: 23px">欢迎来到酒店客房管理系统</div>

  </div>
</template>
<script>

export default {
  data() {
    return {
    };
  },
  mounted() {
  },
  methods: {}
}
</script>

<style scoped>
.wrap {
  position: relative;
  background: url('../assets/images/bg.png') center center no-repeat, #0D1623; /*添加背景图片和颜色*/
  background-size: cover;
  width: 100%;
  height: 100vh;
  overflow: hidden; /* 防止 leftpart 超出 wrap */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.top-image {
  top: 6%;
  left: 0;
  width: 100%;
  height: 6%; /* 调整图片高度为屏幕高度的6% */
  object-fit: cover; /* 图片填充方式 */
}
/*.top-image {*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 6%; !* 调整图片高度为屏幕高度的6% *!*/
/*  object-fit: cover; !* 图片填充方式 *!*/
/*}*/

/* 左上 */
.upperleft{
  position: absolute;
  top: 6%; /* 距离上面 6% */
  bottom: 58%; /* 距离下面 60% */
  left: 1%; /* 距离左侧1% */
  width:28%;
  border: 2px dashed #aaa;
  background-color: rgba(9, 37, 59, 0.5); /* 模块背景颜色 并透明显示 */
}
/* 中上 */
.soso{
  position: absolute;
  top: 6%; /* 距离上面 6% */
  bottom: 58%; /* 距离下面 60% */
  left: 30%; /* 距离左侧1% */
  width:40%;
  border: 2px dashed #aaa;
  background-color: rgba(9, 37, 59, 0.5);
}
/* 右上 */
.upperright{
  position: absolute;
  top: 6%; /* 距离上面 6% */
  bottom: 58%; /* 距离下面 60% */
  left: 71%; /* 距离左侧1% */
  width:28%;
  border: 2px dashed #aaa;
  background-color: rgba(9, 37, 59, 0.5);
}
/* 左下 */
.lowerleft{
  position: absolute;
  top: 43%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 1%; /* 距离左侧1% */
  width:28%;
  border: 2px dashed #aaa;
  background-color: rgba(9, 37, 59, 0.5);
}
/* 中 */
.middle{
  position: absolute;
  top: 43%; /* 距离上面 43% */
  bottom: 30%; /* 距离下面 50% */
  left: 30%; /* 距离左侧1% */
  width:40%;
  border: 2px dashed #aaa;
  background-color: rgba(9, 37, 59, 0.5);
}
/* 中下 */
.lowermiddle{
  position: absolute;
  top: 70%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 30%; /* 距离左侧1% */
  width:40%;
  border: 2px dashed #aaa;
  background-color: rgba(9, 37, 59, 0.5);
}
/* 右下 */
.lowerright{
  position: absolute;
  top: 43%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 71%; /* 距离左侧1% */
  width:28%;
  border: 2px dashed #aaa;
  background-color: rgba(9, 37, 59, 0.5);
}
</style>
